import React, {
    Component,
    PropTypes
} from 'react';

export default class Header extends Component {

    render() {
        const {
            title,
            placeholder,
            autoComplete
        } = this.props;
        return (
            <div className="header">
                <h1>{title || 'toods'}</h1>
                <input type="text"
                className="new-todo"
                autoFocus="true"
                placeholder={placeholder || 'What needs to be done?'} 
                autoComplete={autoComplete || 'off'} onKeyPress={e=>e.nativeEvent.keyCode === 13 && this.onKeyEnter(e)}/>
            </div>
        );
    }

    onKeyEnter(e) {
        this.props.onKeyEnter && this.props.onKeyEnter(e.nativeEvent.target.value);
        e.nativeEvent.target.value = '';
    }
}

Header.propTypes = {
    onKeyEnter: PropTypes.func.isRequired,
    title: PropTypes.string,
    placeholder: PropTypes.string,
    autoComplete: PropTypes.oneOf(['off', 'on'])
}